<template>
    <div>
        <!-- 导航部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>参数列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区 -->
<el-card>
<el-alert
    title="注意：只允许为第三级分类设置相关参数！"
    type="warning" :closable="false"  show-icon>
  </el-alert>
<!-- 选择商品分类区域 -->
<el-row class="sel">
    <el-col>
        <span>选择商品分类：</span> 
         <el-cascader
    v-model="selectkeys"
    :options="cateform"
    :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',children:'children' }"
    @change="handleChange"></el-cascader>
        <!-- 商品分类级联选择框 -->
    </el-col>
</el-row>
<!-- 绘制TAB标签页 -->
 <el-tabs v-model="activeName" @tab-click="handletabClick">
    <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" size="mini" :disabled="isbtnable" @click="adddialogVisible=true">添加参数</el-button>
        <!-- 动态参数表格 -->
        <el-table :data="manydata" border stripe>
            <!-- 展开行 -->
              <el-table-column type="expand">
                 <template slot-scope="scope">
                   <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleclose(i,scope.row)">{{item}}</el-tag>
 <!-- 输入的文本框 -->
 <el-input
  class="input-new-tag"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm(scope.row)"
  @blur="handleInputConfirm(scope.row)"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>                  
               </template> 

              </el-table-column>
           <el-table-column type="index"></el-table-column>
        <el-table-column label="参数名称" prop="attr_name"></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-etit" size="mini" @click="showeditdilage(scope.row.attr_id)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deldilage(scope.row.attr_id)">删除</el-button>
            </template>
        </el-table-column>

        </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" size="mini" :disabled="isbtnable" @click="adddialogVisible=true">添加属性</el-button>
              <el-table :data="onlydata" border stripe>
            <!-- 展开行 -->
              <el-table-column type="expand" >
        <template slot-scope="scope">
                   <el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleclose(i,scope.row)">{{item}}</el-tag>
 <!-- 输入的文本框 -->
 <el-input
  class="input-new-tag"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm(scope.row)"
  @blur="handleInputConfirm(scope.row)"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>                  
               </template> 

              </el-table-column>
           <el-table-column type="index"></el-table-column>
        <el-table-column label="属性名称" prop="attr_name"></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-etit" size="mini" @click="showeditdilage(scope.row.attr_id)" >编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deldilage(scope.row.attr_id)">删除</el-button>
            </template>
        </el-table-column>

        </el-table>
    </el-tab-pane>
  </el-tabs>
</el-card>
     <!-- 添加动态参数对话框 -->
  <el-dialog
  :title="'添加'+ titletext"
  :visible.sync="adddialogVisible"
  width="50%" @close="closeable">
<el-form :model="addForm" :rules="addrules" ref="addruleForm" label-width="100px" >
  <el-form-item :label="titletext" prop="attr_name">
    <el-input v-model="addForm.attr_name"></el-input>
  </el-form-item></el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="adddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addthispra">确 定</el-button>
  </span>
</el-dialog>

<!-- 修改动态对话框 -->
 <el-dialog
  :title="'修改'+ titletext"
  :visible.sync="editdialogVisible"
  width="50%" @close="editcloseable">
<el-form :model="editForm" :rules="editrules" ref="editruleForm" label-width="100px" >
  <el-form-item :label="titletext" prop="attr_name">
    <el-input v-model="editForm.attr_name"></el-input>
  </el-form-item></el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editthispra">确 定</el-button>
  </span>
</el-dialog>

    </div>
</template>


<script>

export default {
   data(){
       return {
           cateform:[],
           selectkeys:[],
           activeName:'many',
           manydata:[],
           onlydata:[],
           adddialogVisible:false,
           editdialogVisible:false,
           inputVisible:false,
           inputValue:'',
           editForm:{},
           addForm:{},
           addrules:{attr_name:[{required:true,message:"请输入参数名称",trigger:'blur'}]},
           editrules:{attr_name:[{required:true,message:"请输入参数名称",trigger:'blur'}]}
       }
   },
   created(){this.getcatelist()},
   methods:{
    //    获取所有商品分类
      async  getcatelist(){
           const {data:res}=await this.$http.get('categories')
           if(res.meta.status!=200) this.$message.error("获取商品分类失败");
           this.cateform= res.data;

       },
  handleChange(){
     this.getparamsdate();
   },
  async getparamsdate(){   if(this.selectkeys.length!=3)
      { this.selectkeys=[] ;this.manydata=[];this.onlydata=[]
        return}
         const {data:res}= await this.$http.get(`categories/${this.cateid}/attributes/`,{params:{sel:this.activeName}})
                      if(res.meta.status!=200)
                      {return this.$message.error("获取参数列表失败！");}
                    console.log(res.data) 
                    res.data.forEach(item=>{
                  item.attr_vals= item.attr_vals.split(',')
                     //控制文本框显示与隐藏
                    item.inputVisible=false;
                    item.inputValue='';
                    })
                    if(this.activeName==='many')
                    {this.manydata=res.data}
                    else{
                      this.onlydata=res.data
                    }
                 
                    },
   handletabClick(){
          this.getparamsdate();


   },
   closeable(){
       this.$refs.addruleForm.resetFields();
   },
   addthispra(){
          this.$refs.addruleForm.validate(async vaild=>{
                    if(!vaild){return;}
                   const {data:res}= await this.$http.post(`categories/${this.cateid}/attributes`,{attr_name:this.addForm.attr_name,attr_sel:this.activeName})
                      if(res.meta.status!=201)
                      {return this.$message.error("添加参数失败！");}
                    else  this.$message.success("添加参数成功！")
                       this.getcatelist()
                        this.adddialogVisible=false   })
   },
  async  showeditdilage(id){
                const {data:res}= await this.$http.get(`categories/${this.cateid}/attributes/${id}`,{params:{attr_sel:this.activeName}})
                      if(res.meta.status!=200)
                      {return this.$message.error("获取分类失败！");}
                    this.editForm=res.data;
                this.editdialogVisible=true
       },
       editcloseable(){
          this.$refs.editruleForm.resetFields(); 
       },
       //确定按钮
       editthispra(){
       this.$refs.editruleForm.validate(async vaild=>{
                    if(!vaild){return;}
                   const {data:res}= await this.$http.put(`categories/${this.cateid}/attributes/${this.editForm.attr_id}`,{attr_name:this.editForm.attr_name,attr_sel:this.activeName})
                      if(res.meta.status!=200)
                      {return this.$message.error("添加参数失败！");}
                    else  this.$message.success("添加参数成功！")
                       this.getcatelist()
                        this.editdialogVisible=false   })
       },
    async   deldilage(id){
       const confiresult =await  this.$confirm('此操作将永久删除该参数, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
           if(confiresult!=='confirm') { return this.$message.info("已经取消删除！");}
               const {data:res} =await this.$http.delete(`categories/${this.cateid}/attributes/${id}`)
    if(res.meta.status!=200)
                  {  return this.$message.error("删除参数信息失败！");}
                this.$message.success("删除参数信息成功！")
              this.getcatelist();
       },
  async   handleInputConfirm(row){
         if(row.inputValue.trim().length==0)
         {row.inputValue='';row.inputVisible=false; return}
       row.attr_vals.push(row.inputValue.trim())
       row.inputValue='';
       row.inputVisible=false;
       //发起请求保存数据
         const {data:res}= await this.$http.put(`categories/${this.cateid}/attributes/${row.attr_id}`,{attr_name:row.attr_name,attr_sel:row.attr_sel,attr_vals:row.attr_vals.join(' ,')})
                      if(res.meta.status!=200)
                      {return this.$message.error("修改参数项失败！");}
             return this.$message.success("修改参数项成功！")

     },
     showInput(row){
             row.inputVisible=true;
     },
  async handleclose(i,row){
    row.attr_vals.splice(i,1)
     const {data:res}= await this.$http.put(`categories/${this.cateid}/attributes/${row.attr_id}`,{attr_name:row.attr_name,attr_sel:row.attr_sel,attr_vals:row.attr_vals.join(' ,')})
                      if(res.meta.status!=200)
                      {return this.$message.error("修改参数项失败！");}
             return this.$message.success("删除参数项成功！")
   },
   
   },
   computed:{
       isbtnable(){
           if(this.selectkeys.length!=3) 
           {return true}
           return false
       },
       cateid(){
             if(this.selectkeys.length==3)   {return this.selectkeys[2]}
             return null
       },
       titletext(){
           if(this.activeName=='many')
           {return '动态参数'}
           return '静态属性'
       },
      
   },
}
</script>


<style lang="less" scoped>
.sel{
    margin: 15px 0;
}
.input-new-tag{
    width: 120px;
    margin-left: 15px;
}
.el-tag{
    margin-left: 15px;
}
</style>
